<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="chapterMoi"><fmt:formatNumber type="number" maxIntegerDigits="4" value="${chapterTruyen.chapterNumber}" /></c:set>
<head>
	<title>Đọc truyện tình cảm ${truyen.name} - chương ${chapterTruyen.name} | truyện tình cảm ${truyen.name}</title>
	<meta name="keywords" content="truyen tinh cam ${truyen.alias},doc truyen ${truyen.alias}, xem truyen ${truyen.alias},doc truyen ${truyen.alias} online, xem truyen ${truyen.alias} online" />
	<meta name="description" content="Truyện tình cảm ${truyen.name} - Chapter ${chapterMoi}, 
									<c:choose>
										<c:when test="${fn:length(truyen.info)>97}">
											<c:set var="description" value="${fn:substring(truyen.info,0,97)} ..." />
											${description}
										</c:when>
										<c:otherwise>
											${truyen.info}
										</c:otherwise>
									</c:choose>" />
	<!-- js, css Chon mau -->
	<link rel="stylesheet" type="text/css" href="<spring:url value="/resources/css/jquery.miniColors.css" />" />
	<script type="text/javascript" src="<spring:url value="/resources/scripts/jquery.miniColors.js" />"></script>
	<!-- 	coment facebook -->
	<meta property="fb:app_id" content='<fmt:message key="app.idFaceBook" />' />
	<link rel="image_src" href="${truyen.linkImage}/s61/${truyen.nameImage}" />
	<meta property="og:title" content="Truyện tình cảm ${truyen.name} | Đọc truyện tình cảm ${truyen.name} online" />
	<meta property="og:image" content="${truyen.linkImage}/s61/${truyen.nameImage}" />
	<meta property="og:description" content="${truyen.info}"/>	
	<script type="text/javascript" src="<spring:url value="/resources/scripts/jquery.cookie.js" />"></script>	
	<script type="text/javascript">
		$(document).ready(function(){
			//Dinh background cho trang doc truyen chi tiet
			$("#content").css({
				width:"100%"
			});
			//xu ly phan trang
			$("#lstChapter").change(function(){
				var urlChapter = $(this).val();
				window.location.href=urlChapter;
			});
			
			var urlChapterFirst = $("select#lstChapter option").last().attr("value");
			var urlChapterPrev = $("select#lstChapter option:selected").next().attr("value");
			var urlChapterNext = $("select#lstChapter option:selected").prev().attr("value");
			var urlChapterLast = $("select#lstChapter option").first().attr("value");
			
			if(urlChapterPrev === undefined){
				$('.firstChapter').hide();
				$('.prevChapter').hide();
			}
			if(urlChapterNext === undefined){
				$('.nextChapter').hide();
				$('.lastChapter').hide();
			}
			
			$('.firstChapter').attr('href',urlChapterFirst);
			$('.prevChapter').attr('href',urlChapterPrev);
			$('.nextChapter').attr('href',urlChapterNext);
			$('.lastChapter').attr('href',urlChapterLast);
			
			//tab comment
			$("#commentFB").hide();
			$("#boxComment .boxTitle a").click(function(e){
				var tt = this.title;
				$(".activeComment").removeClass("activeComment");
				$(this).addClass("activeComment");
				$(".boxTypeComment").hide();
				$("#" + tt).show();
				e.preventDefault();
				return false;
			});
			//scroll
			var offsetTop = Math.round($(".readDetail").position().top);
			$(window).scroll(function(){
				var scr = $(this).scrollTop();
				var offsetBottom = offsetTop + $(".readDetail").height() + 5;
				var screenHeight = screen.availHeight;
				
				if(scr > screenHeight){
					$("#goTop").stop(true,true).fadeIn("fast");
				}else{
					$("#goTop").stop(true,true).fadeOut("slow");
				}
				
				if(scr < 150){
					$("#controlChapter").css({
						top: "152px",
						position: "absolute"
					});
				}else if(scr < offsetBottom ){
					$("#controlChapter").css({
						top: 0,
						position: "fixed"
					});
				}else{
					$("#controlChapter").css({
						top: offsetBottom + "px",
						position: "absolute"
					});
				}
			});
			//go top
			$("#goTop").click(function(){
				$("html,body").animate({
					scrollTop: 0
				},"500");
			});
// 			$(window).load(function(){
// 				//fix width #controlChapter h4
// 				$("#controlChapter h4").css({
// 					width: (screen.availWidth - 770) + "px"
// 				});
// 			});
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		    po.src = 'https://apis.google.com/js/plusone.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		    
		  //set cookie co chu
		 	if($.cookie("coChu") == 4){
		    	$("#chuNho").attr("selected","selected");
		    	$(".readDetail").css("font-size","120%");
		 	}else if($.cookie("coChu") == 3){
		    	$("#chuLonNhat").attr("selected","selected");
		    	$(".readDetail").css("font-size","250%");
    		}else if($.cookie("coChu") == 1){
    			$("#chuTrungBinh").attr("selected","selected");
    			$(".readDetail").css("font-size","150%");
    		}else{
    			$("#chuLon").attr("selected","selected");
    			$(".readDetail").css("font-size","200%");
    		}
            
            $("#chonCoChu").change(function(){
            	var coChu = $(this).val();
            	if(coChu == 4){
            		$.cookie("coChu",4,{expires: 7});
            	}else if(coChu == 3){
            		$.cookie("coChu",3,{expires: 7});
            	}else if(coChu == 1){
            		$.cookie("coChu",1,{expires: 7});
            	}else{
            		$.cookie("coChu",2,{expires: 7});
            	}
    			location.reload();
    		});
            
          //set cookie mau chu
		 	if($.cookie("mauChu") != null){
		 		var color = $.cookie("mauChu");
		    	$(".readDetail").css("color",color);
		    	$(".mauChu").val(color);
		 	}
            
            $('.mauChu').miniColors({
            	close: function(hex, rgb) {
					$.cookie("mauChu",hex,{expires: 7});
					location.reload();
				}
			});
            
          //set cookie mau nen
		 	if($.cookie("mauNen") != null){
		 		var color = $.cookie("mauNen");
		    	$(".readDetail").css("background",color);
		    	$(".mauNen").val(color);
		 	}
            
            $('.mauNen').miniColors({
            	close: function(hex, rgb) {
					$.cookie("mauNen",hex,{expires: 7});
					location.reload();
				}
			});
            
            $('.colorDefault').click(function(){
            	$.removeCookie('coChu');
            	$.removeCookie('mauChu');
            	$.removeCookie('mauNen');
				location.reload();
            });
		});
	</script>
</head>
<body>

	<jsp:include page="boxReadDetail.jsp" />
	<section style="width:1000px;margin:auto">
		<section id="boxMain">
			<%-- 		<jsp:include page="/WEB-INF/includes/ads468x60.jsp" /> --%>
			<jsp:include page="../boxComment.jsp" />
			<%-- 		<jsp:include page="/WEB-INF/includes/ads468x60.jsp" /> --%>
			<jsp:include page="boxSimilarAuthor.jsp" />
		</section>
		<aside>
			<jsp:include page="sidebar/listNewChapter.jsp" />
		</aside>
	</section>
	<jsp:include page="controlChapter.jsp" />
	<div id="goTop" title="Về đầu trang"></div>
</body>